// DOM 元素
const mainInput = document.getElementById('mainInput');
const charCount = document.getElementById('charCount');
const pinyinInput = document.getElementById('pinyinInput');
const candidateItems = document.querySelectorAll('.candidate-item');
const prevBtn = document.querySelector('.page-btn.prev');
const nextBtn = document.querySelector('.page-btn.next');
const pageInfo = document.querySelector('.page-info');
const clearBtn = document.querySelector('.tool-btn[title="清空"]');
const tagsList = document.getElementById('tagsList');
const rainbowBtn = document.getElementById('rainbowBtn');
const clearTagsBtn = document.getElementById('clearTagsBtn');

// 模拟候选词数据
const candidateData = [
    ['天气', '添加', '田地', '甜甜', '填写'],
    ['春天', '创造', '闯荡', '窗台', '船舱'],
    ['万物', '忘记', '方位', '温暖', '完整'],
    ['复苏', '富足', '服从', '付出', '丰富'],
    ['百花', '变化', '拜访', '把握', '背景']
];

let currentPage = 1;
const totalPages = candidateData.length;

// 标签管理
let tags = [];
let tagIdCounter = 0;

// 初始化
function init() {
    updateCharCount();
    updateCandidates();
    
    setupEventListeners();
    updateClearButtonState();
}

// 更新字数统计
function updateCharCount() {
    const text = mainInput.value;
    const charLength = text.length;
    charCount.textContent = charLength;
}

// 更新候选词显示
function updateCandidates() {
    const candidates = candidateData[currentPage - 1];
    candidateItems.forEach((item, index) => {
        if (index < candidates.length) {
            item.textContent = `${index + 1}. ${candidates[index]}`;
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });

    pageInfo.textContent = `${currentPage}/${totalPages}`;
    prevBtn.disabled = currentPage === 1;
    nextBtn.disabled = currentPage === totalPages;
}

// 设置事件监听器
function setupEventListeners() {
    // 输入框事件
    mainInput.addEventListener('input', () => {
        updateCharCount();
        simulatePinyinInput();
    });

    // 回车键生成标签
    mainInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            createTagFromInput();
        }
    });

    // 彩虹弹窗按钮
    rainbowBtn.addEventListener('click', () => {
        if (tags.length === 0) {
            showMessage('请先添加一些标签！');
            return;
        }
        triggerRainbowExplosion();
    });

    // 清除所有标签按钮
    clearTagsBtn.addEventListener('click', () => {
        if (tags.length === 0) {
            showMessage('没有标签需要清除');
            return;
        }
        clearAllTags();
    });

    // 候选词点击
    candidateItems.forEach((item, index) => {
        item.addEventListener('click', () => {
            const candidates = candidateData[currentPage - 1];
            if (index < candidates.length) {
                insertText(candidates[index]);
            }
        });
    });

    // 页面导航
    prevBtn.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            updateCandidates();
        }
    });

    nextBtn.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            updateCandidates();
        }
    });

    // 清空按钮
    clearBtn.addEventListener('click', () => {
        mainInput.value = '';
        updateCharCount();
        mainInput.focus();
    });

    // 键盘快捷键
    document.addEventListener('keydown', (e) => {
        // 数字键选择候选词
        if (e.key >= '1' && e.key <= '5') {
            const index = parseInt(e.key) - 1;
            const candidates = candidateData[currentPage - 1];
            if (index < candidates.length) {
                insertText(candidates[index]);
                e.preventDefault();
            }
        }

        // 空格键选择第一个候选词
        if (e.key === ' ' && mainInput === document.activeElement) {
            const candidates = candidateData[currentPage - 1];
            if (candidates.length > 0) {
                insertText(candidates[0]);
                e.preventDefault();
            }
        }

        // 翻页快捷键
        if (e.key === 'PageUp' || e.key === ',') {
            if (currentPage > 1) {
                currentPage--;
                updateCandidates();
                e.preventDefault();
            }
        }
        if (e.key === 'PageDown' || e.key === '.') {
            if (currentPage < totalPages) {
                currentPage++;
                updateCandidates();
                e.preventDefault();
            }
        }
    });

    // 候选词高亮
    candidateItems.forEach((item, index) => {
        item.addEventListener('mouseenter', () => {
            candidateItems.forEach(i => i.classList.remove('active'));
            item.classList.add('active');
        });
    });
}

// 插入文本到输入框
function insertText(text) {
    const start = mainInput.selectionStart;
    const end = mainInput.selectionEnd;
    const value = mainInput.value;

    mainInput.value = value.substring(0, start) + text + value.substring(end);
    mainInput.selectionStart = mainInput.selectionEnd = start + text.length;

    updateCharCount();
    mainInput.focus();

    // 模拟输入效果
    pinyinInput.textContent = text;
    setTimeout(() => {
        pinyinInput.textContent = '';
    }, 1000);
}

// 模拟拼音输入
function simulatePinyinInput() {
    const text = mainInput.value;
    if (text.length > 0) {
        // 模拟最后输入的拼音
        const lastChar = text[text.length - 1];
        const pinyinMap = {
            '今': 'jin',
            '天': 'tq',
            '气': 'qi',
            '很': 'hen',
            '好': 'hk',
            '我': 'wo',
            '想': 'x',
            '出': 'ch',
            '去': 'qu',
            '散': 'san',
            '步': 'bu',
            '但': 'dan',
            '是': 'sh',
            '外': 'w',
            '面': 'm',
            '有': 'y',
            '点': 'd',
            '冷': 'len',
            '需': 'xu',
            '要': 'y',
            '多': 'du',
            '穿': 'chuan',
            '一': 'y',
            '件': 'jian',
            '衣': 'yi',
            '服': 'f',
            '春': 'ch',
            '来': 'l',
            '万': 'w',
            '物': 'w',
            '复': 'f',
            '苏': 's',
            '百': 'b',
            '花': 'h',
            '齐': 'q',
            '放': 'f'
        };

        pinyinInput.textContent = pinyinMap[lastChar] || '';
    } else {
        pinyinInput.textContent = '';
    }
}

// 工具栏功能
document.querySelectorAll('.tool-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const title = this.getAttribute('title');

        switch(title) {
            case '剪切':
                document.execCommand('cut');
                updateCharCount();
                break;
            case '复制':
                document.execCommand('copy');
                break;
            case '粘贴':
                navigator.clipboard.readText().then(text => {
                    insertText(text);
                }).catch(err => {
                    console.log('无法访问剪贴板:', err);
                });
                break;
            case '设置':
                alert('设置功能待实现');
                break;
        }
    });
});

// 窗口控制
document.querySelector('.btn.minimize').addEventListener('click', () => {
    console.log('最小化窗口');
});

document.querySelector('.btn.maximize').addEventListener('click', () => {
    console.log('最大化窗口');
});

document.querySelector('.btn.close').addEventListener('click', () => {
    if (confirm('确定要关闭窗口吗？')) {
        console.log('关闭窗口');
    }
});

// 拖拽功能（可选）
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;

const container = document.querySelector('.container');
const header = document.querySelector('.header');

header.style.cursor = 'move';

header.addEventListener('mousedown', dragStart);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd);

function dragStart(e) {
    initialX = e.clientX - xOffset;
    initialY = e.clientY - yOffset;

    if (e.target.closest('.header')) {
        isDragging = true;
    }
}

function drag(e) {
    if (isDragging) {
        e.preventDefault();
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;

        xOffset = currentX;
        yOffset = currentY;

        container.style.transform = `translate(${currentX}px, ${currentY}px)`;
    }
}

function dragEnd(e) {
    initialX = currentX;
    initialY = currentY;
    isDragging = false;
}

// 标签功能函数
function createTagFromInput() {
    const text = mainInput.value.trim();
    if (text === '') return;

    // 将文本按标点符号分割成多个标签
    const segments = text.split(/[，。！？；：、\s,\.!?;:\s]+/).filter(segment => segment.length > 0);

    segments.forEach(segment => {
        if (segment.length > 0) {
            createTag(segment);
        }
    });

    mainInput.value = '';
    updateCharCount();
    mainInput.focus();
}

function createTag(text) {
    const tag = {
        id: ++tagIdCounter,
        text: text,
        color: getRandomColor()
    };

    tags.push(tag);
    renderTag(tag);
    updateClearButtonState();
}

function renderTag(tag) {
    const tagElement = document.createElement('div');
    tagElement.className = 'tag';
    tagElement.dataset.tagId = tag.id;
    tagElement.innerHTML = `
        ${tag.text}
        <span class="tag-remove" data-tag-id="${tag.id}">×</span>
    `;

    // 设置标签颜色
    tagElement.style.background = tag.color;

    // 添加点击事件
    tagElement.addEventListener('click', (e) => {
        if (!e.target.classList.contains('tag-remove')) {
            showTagPopup(tag, tagElement);
        }
    });

    // 删除按钮事件
    const removeBtn = tagElement.querySelector('.tag-remove');
    removeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        removeTag(tag.id);
    });

    tagsList.appendChild(tagElement);
}

function removeTag(tagId) {
    tags = tags.filter(tag => tag.id !== tagId);
    const tagElement = document.querySelector(`[data-tag-id="${tagId}"]`);
    if (tagElement) {
        tagElement.style.animation = 'tag-bounce 0.3s ease reverse';
        setTimeout(() => {
            tagElement.remove();
            updateClearButtonState();
        }, 300);
    }
}

// 清除所有标签
function clearAllTags() {
    const tagElements = document.querySelectorAll('.tag');

    if (tagElements.length === 0) return;

    // 创建清除动画效果
    tagElements.forEach((element, index) => {
        setTimeout(() => {
            // 随机方向的飞出动画
            const angle = Math.random() * Math.PI * 2;
            const distance = 200 + Math.random() * 300;
            const tx = Math.cos(angle) * distance;
            const ty = Math.sin(angle) * distance;

            element.style.transition = 'all 0.6s ease-out';
            element.style.transform = `translate(${tx}px, ${ty}px) rotate(${Math.random() * 720}deg) scale(0)`;
            element.style.opacity = '0';

            // 创建粒子效果
            createClearParticles(element);
        }, index * 50);
    });

    // 清空数据和更新界面
    setTimeout(() => {
        tags = [];
        tagsList.innerHTML = '';
        updateClearButtonState();
        showMessage('所有标签已清除！');
    }, tagElements.length * 50 + 600);
}

// 创建清除时的粒子效果
function createClearParticles(element) {
    const rect = element.getBoundingClientRect();
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;
    const color = getComputedStyle(element).background;

    for (let i = 0; i < 8; i++) {
        const particle = document.createElement('div');
        particle.style.cssText = `
            position: fixed;
            left: ${x}px;
            top: ${y}px;
            width: 4px;
            height: 4px;
            background: ${color};
            border-radius: 50%;
            pointer-events: none;
            z-index: 1001;
        `;

        const angle = (i / 8) * Math.PI * 2;
        const velocity = 3 + Math.random() * 4;
        const tx = Math.cos(angle) * velocity * 40;
        const ty = Math.sin(angle) * velocity * 40;

        particle.style.setProperty('--tx', `${tx}px`);
        particle.style.setProperty('--ty', `${ty}px`);
        particle.style.animation = 'clear-particle-fly 0.8s ease-out forwards';

        document.body.appendChild(particle);
        setTimeout(() => particle.remove(), 800);
    }
}

// 更新清除按钮状态
function updateClearButtonState() {
    if (tags.length === 0) {
        clearTagsBtn.disabled = true;
        clearTagsBtn.textContent = '🗑️ 没有标签';
    } else {
        clearTagsBtn.disabled = false;
        clearTagsBtn.textContent = `🗑️ 清除全部 (${tags.length})`;
    }
}

function getRandomColor() {
    const colors = [
        'linear-gradient(135deg, #ff6b6b, #ee5a24)',
        'linear-gradient(135deg, #4ecdc4, #44a3aa)',
        'linear-gradient(135deg, #45b7d1, #2196f3)',
        'linear-gradient(135deg, #96ceb4, #4caf50)',
        'linear-gradient(135deg, #ffeaa7, #fdcb6e)',
        'linear-gradient(135deg, #dfe6e9, #b2bec3)',
        'linear-gradient(135deg, #a29bfe, #6c5ce7)',
        'linear-gradient(135deg, #fd79a8, #e84393)',
        'linear-gradient(135deg, #ff9ff3, #ee5a24)',
        'linear-gradient(135deg, #54a0ff, #00d2d3)'
    ];
    return colors[Math.floor(Math.random() * colors.length)];
}

// 彩虹弹窗效果 - 烟花喷射
function triggerRainbowExplosion() {
    const tagElements = document.querySelectorAll('.tag');
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;

    // 隐藏原始标签
    tagElements.forEach(element => {
        element.style.opacity = '0.1';
        element.style.transform = 'scale(0.8)';
    });

    // 创建发射台效果
    createLaunchPad(centerX, centerY);

    // 为每个标签创建烟花喷射
    tags.forEach((tag, index) => {
        setTimeout(() => {
            createFirework(tag, index, centerX, centerY);
        }, index * 150);
    });

    // 创建额外的烟花粒子效果
    createFireworksShow(centerX, centerY);
}

// 创建发射台效果
function createLaunchPad(centerX, centerY) {
    const launchPad = document.createElement('div');
    launchPad.style.cssText = `
        position: fixed;
        left: ${centerX}px;
        top: ${centerY}px;
        width: 60px;
        height: 60px;
        background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,215,0,0.6), transparent);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        animation: launch-pulse 1s ease-in-out 3;
    `;
    document.body.appendChild(launchPad);

    setTimeout(() => launchPad.remove(), 3000);
}

// 创建烟花喷射效果
function createFirework(tag, index, centerX, centerY) {
    const angle = Math.random() * Math.PI * 2;
    const velocity = 8 + Math.random() * 6; // 随机速度
    const targetRadius = 200 + Math.random() * 250; // 随机高度

    const targetX = centerX + Math.cos(angle) * targetRadius;
    const targetY = centerY + Math.sin(angle) * targetRadius;

    // 创建火箭轨迹
    createRocketTrail(centerX, centerY, targetX, targetY, index);

    // 延迟后创建爆炸效果
    setTimeout(() => {
        createFireworkExplosion(tag, targetX, targetY, index);
    }, 800 + Math.random() * 400);
}

// 创建火箭轨迹
function createRocketTrail(startX, startY, endX, endY, index) {
    const trail = document.createElement('div');
    const rainbowColors = ['#ff6b6b', '#ff8e53', '#ffd93d', '#6bcf7f', '#4a9eff', '#b794f4'];
    const color = rainbowColors[index % rainbowColors.length];

    trail.style.cssText = `
        position: fixed;
        left: ${startX}px;
        top: ${startY}px;
        width: 6px;
        height: 6px;
        background: ${color};
        border-radius: 50%;
        box-shadow: 0 0 10px ${color}, 0 0 20px ${color};
        z-index: 1000;
    `;

    // 创建尾迹粒子
    const particles = [];
    for (let i = 0; i < 15; i++) {
        const particle = document.createElement('div');
        particle.style.cssText = `
            position: fixed;
            width: 4px;
            height: 4px;
            background: ${color};
            border-radius: 50%;
            opacity: ${1 - i * 0.06};
            z-index: 999;
        `;
        particles.push(particle);
        document.body.appendChild(particle);
    }

    document.body.appendChild(trail);

    // 动画轨迹
    const duration = 800 + Math.random() * 400;
    const startTime = Date.now();

    function animateTrail() {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);

        // 使用二次贝塞尔曲线模拟真实抛物线
        const easeOut = 1 - Math.pow(1 - progress, 2);
        const x = startX + (endX - startX) * easeOut;
        const y = startY + (endY - startY) * easeOut - progress * (1 - progress) * 100; // 抛物线效果

        trail.style.left = `${x}px`;
        trail.style.top = `${y}px`;

        // 更新尾迹粒子
        particles.forEach((particle, i) => {
            const trailProgress = Math.max(0, progress - i * 0.03);
            const trailX = startX + (endX - startX) * trailProgress;
            const trailY = startY + (endY - startY) * trailProgress - trailProgress * (1 - trailProgress) * 100;
            particle.style.left = `${trailX}px`;
            particle.style.top = `${trailY}px`;
            particle.style.opacity = Math.max(0, (1 - i * 0.06) * (1 - trailProgress));
        });

        if (progress < 1) {
            requestAnimationFrame(animateTrail);
        } else {
            trail.remove();
            particles.forEach(p => p.remove());
        }
    }

    animateTrail();
}

// 创建烟花爆炸效果
function createFireworkExplosion(tag, x, y, index) {
    const popup = document.createElement('div');
    popup.className = 'rainbow-popup';
    popup.textContent = tag.text;

    // 设置彩虹渐变背景
    const rainbowColors = [
        '#ff6b6b', '#ff8e53', '#ffd93d', '#6bcf7f',
        '#4a9eff', '#b794f4', '#ff1493', '#00ffff'
    ];

    const colorIndex = index % rainbowColors.length;
    const nextColorIndex = (index + 2) % rainbowColors.length;

    popup.style.background = `linear-gradient(135deg, ${rainbowColors[colorIndex]}, ${rainbowColors[nextColorIndex]})`;
    popup.style.left = `${x}px`;
    popup.style.top = `${y}px`;
    popup.style.animation = 'firework-explosion 0.6s ease-out forwards, firework-float 2s ease-in-out 0.6s infinite, firework-pulse 1s ease-in-out 0.6s infinite';

    document.body.appendChild(popup);

    // 创建爆炸粒子
    createExplosionParticles(x, y, rainbowColors[colorIndex]);

    // 4秒后消失
    setTimeout(() => {
        popup.style.animation = 'firework-fade 0.8s ease forwards';
        setTimeout(() => {
            popup.remove();
            // 恢复原始标签
            const tagElements = document.querySelectorAll('.tag');
            tagElements.forEach(element => {
                element.style.opacity = '1';
                element.style.transform = 'scale(1)';
            });
        }, 800);
    }, 4000);
}

// 创建爆炸粒子
function createExplosionParticles(x, y, color) {
    const particleCount = 20 + Math.floor(Math.random() * 15);

    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'firework-particle';
        particle.style.cssText = `
            position: fixed;
            left: ${x}px;
            top: ${y}px;
            width: ${3 + Math.random() * 4}px;
            height: ${3 + Math.random() * 4}px;
            background: ${color};
            border-radius: 50%;
            box-shadow: 0 0 6px ${color};
            z-index: 998;
        `;

        const angle = (i / particleCount) * Math.PI * 2 + Math.random() * 0.5;
        const velocity = 2 + Math.random() * 6;
        const tx = Math.cos(angle) * velocity * 30;
        const ty = Math.sin(angle) * velocity * 30;

        particle.style.setProperty('--tx', `${tx}px`);
        particle.style.setProperty('--ty', `${ty}px`);
        particle.style.animation = 'firework-particle-explode 1.2s ease-out forwards';

        document.body.appendChild(particle);

        setTimeout(() => particle.remove(), 1200);
    }

    // 创建闪光效果
    const flash = document.createElement('div');
    flash.style.cssText = `
        position: fixed;
        left: ${x}px;
        top: ${y}px;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle, rgba(255,255,255,0.8), transparent);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 997;
        animation: firework-flash 0.3s ease-out forwards;
    `;
    document.body.appendChild(flash);
    setTimeout(() => flash.remove(), 300);
}

// 创建烟花表演效果
function createFireworksShow(centerX, centerY) {
    // 额外的装饰性烟花
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            createDecorativeFirework(centerX, centerY);
        }, i * 300 + 1000);
    }
}

// 创建装饰性烟花
function createDecorativeFirework(centerX, centerY) {
    const angle = Math.random() * Math.PI * 2;
    const distance = 150 + Math.random() * 200;
    const x = centerX + Math.cos(angle) * distance;
    const y = centerY + Math.sin(angle) * distance;

    createRocketTrail(centerX, centerY, x, y, Math.floor(Math.random() * 6));

    setTimeout(() => {
        createExplosionParticles(x, y, `hsl(${Math.random() * 360}, 100%, 60%)`);
    }, 800);
}

// 创建旧的彩虹弹窗（保留用于标签点击）
function createRainbowPopup(tag, element) {
    const rect = element.getBoundingClientRect();
    const popup = document.createElement('div');
    popup.className = 'rainbow-popup';
    popup.textContent = tag.text;
    popup.style.left = `${rect.left + rect.width / 2}px`;
    popup.style.top = `${rect.top - 10}px`;
    popup.style.background = tag.color;
    popup.style.animation = 'rainbow-explosion 0.5s ease forwards';

    document.body.appendChild(popup);

    setTimeout(() => {
        popup.style.animation = 'tag-bounce 0.3s ease reverse';
        setTimeout(() => popup.remove(), 300);
    }, 1500);
}

function createParticlesAroundPopup(x, y, color) {
    for (let i = 0; i < 8; i++) {
        const particle = document.createElement('div');
        particle.className = 'rainbow-particle';
        particle.style.background = color;
        particle.style.left = `${x}px`;
        particle.style.top = `${y}px`;

        const angle = (i / 8) * Math.PI * 2;
        const distance = 50 + Math.random() * 50;
        const tx = Math.cos(angle) * distance;
        const ty = Math.sin(angle) * distance;

        particle.style.setProperty('--tx', `${tx}px`);
        particle.style.setProperty('--ty', `${ty}px`);
        particle.style.animation = 'particle-float 1s ease forwards';

        document.body.appendChild(particle);

        setTimeout(() => particle.remove(), 1000);
    }
}

function createRainbowParticles(centerX, centerY) {
    const rainbowColors = ['#ff6b6b', '#ff8e53', '#ffd93d', '#6bcf7f', '#4a9eff', '#b794f4'];

    for (let i = 0; i < 20; i++) {
        setTimeout(() => {
            const particle = document.createElement('div');
            particle.className = 'rainbow-particle';
            particle.style.background = rainbowColors[Math.floor(Math.random() * rainbowColors.length)];
            particle.style.left = `${centerX}px`;
            particle.style.top = `${centerY}px`;

            const angle = Math.random() * Math.PI * 2;
            const distance = 100 + Math.random() * 200;
            const tx = Math.cos(angle) * distance;
            const ty = Math.sin(angle) * distance;

            particle.style.setProperty('--tx', `${tx}px`);
            particle.style.setProperty('--ty', `${ty}px`);
            particle.style.animation = 'particle-float 2s ease forwards';

            document.body.appendChild(particle);

            setTimeout(() => particle.remove(), 2000);
        }, i * 50);
    }
}

function showTagPopup(tag, element) {
    const rect = element.getBoundingClientRect();
    const popup = document.createElement('div');
    popup.className = 'rainbow-popup';
    popup.textContent = tag.text;
    popup.style.left = `${rect.left + rect.width / 2}px`;
    popup.style.top = `${rect.top - 10}px`;
    popup.style.background = tag.color;
    popup.style.animation = 'rainbow-explosion 0.5s ease forwards';

    document.body.appendChild(popup);

    setTimeout(() => {
        popup.style.animation = 'tag-bounce 0.3s ease reverse';
        setTimeout(() => popup.remove(), 300);
    }, 1500);
}

function showMessage(message) {
    const messageEl = document.createElement('div');
    messageEl.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 16px 24px;
        border-radius: 8px;
        font-size: 16px;
        z-index: 10000;
        animation: fadeIn 0.3s ease;
    `;
    messageEl.textContent = message;

    document.body.appendChild(messageEl);

    setTimeout(() => {
        messageEl.style.animation = 'tag-bounce 0.3s ease reverse';
        setTimeout(() => messageEl.remove(), 300);
    }, 2000);
}

// 初始化应用
init();